<template>
  <template v-if="isAlready">
    <el-card :shadow="widget.props.shadow"
             :style="'border:'+widget.props.border+';'">
      <template #header v-if="(widget.props.showName&&widget.name)||widget.props.closeable">
        <div  v-if="widget.titleStyle==='tabTitle'"  style="text-align: left;margin:0;height:36px;padding: 0px;height: 40px;
        padding-left: 9px;margin-top: -15px;display: none;">
          <div v-if="widget.props.showName&&widget.name" class="cardwidgetheaderclass">
            <span class="widgetheaderclass">{{ widget.name }}</span>
          </div>
          <div v-if="widget.props.closeable" style="float:right;text-align: right;cursor: pointer;">
            <el-icon @click='widget.props.visible=false' style="margin-left: 7px;">
              <component is="el-icon-close"></component>
            </el-icon>
          </div>
        </div>
        <div v-else
        style="
        text-align: left;margin:0;height:19px;background-color: rgb(246,246,246) !important;width: 99%;
        padding: 10px;height: 40px;padding-right: 0px;
        padding-left: 7px;margin-top: 5px;">
          <div v-if="widget.props.showName&&widget.name" style="float: left;">
            <span class="widgetheaderclass">{{  widget.name }}</span>
          </div>
          <div v-if="widget.props.closeable" style="float:right;text-align: right;cursor: pointer;">
            <el-icon @click='widget.props.visible=false' style="margin-left: 7px;">
              <component is="el-icon-close"></component>
            </el-icon>
          </div>
        </div>
      </template>
      <template #default>
        <dy-card v-if="widget.props.type==='dy-card'" :model="model" :widget="widget" :drag="drag"></dy-card>
        <dy-steps v-if="widget.props.type==='dy-steps'" :model="model" :widget="widget" :drag="drag"></dy-steps>
        <dy-tabs v-if="widget.props.type==='dy-tabs'" :model="model" :widget="widget" :drag="drag"></dy-tabs>
        <dy-table v-if="widget.props.type==='dy-table'" :model="model" :widget="widget" :drag="drag"></dy-table>
        <dy-flow v-if="widget.props.type==='dy-flow'" :model="model" :widget="widget" :drag="drag"></dy-flow>
        <dy-flow-model v-if="widget.props.type==='dy-flow-model'" :model="model" :widget="widget" :drag="drag"></dy-flow-model>
        <w-asset-log v-if="widget.props.type==='w-asset-log'" :model="model" :widget="widget" :drag="drag"></w-asset-log>
        <w-asset-change-info v-if="widget.props.type==='w-asset-change-info'" :model="model" :widget="widget" :drag="drag"></w-asset-change-info>
        <w-table v-if="widget.props.type==='w-table'" :model="model" :widget="widget" :drag="drag"></w-table>
        <w-asset-accessory v-if="widget.props.type==='w-asset-accessory'" :model="model" :widget="widget" :drag="drag"></w-asset-accessory>
      </template>
    </el-card>
  </template>
</template>
<script>

import DyCard from "@/views/asset/card/module/widget/items/dy-card.vue";
import DySteps from "@/views/asset/card/module/widget/items/dy-steps.vue";
import DyTabs from "@/views/asset/card/module/widget/items/dy-tabs.vue";
import DyTable from "@/views/asset/card/module/widget/items/dy-table.vue";
import DyFlow from "@/views/asset/card/module/widget/items/dy-flow.vue";
import DyFlowModel from "@/views/asset/card/module/widget/items/dy-flow-model.vue";
import WAssetLog from "@/views/asset/card/module/widget/items/w-asset-log.vue";
import WAssetChangeInfo from "@/views/asset/card/module/widget/items/w-asset-change-info.vue";
import WTable from "@/views/asset/card/module/widget/items/w-table.vue";
import WAssetAccessory from "@/views/asset/card/module/widget/items/w-asset-accessory.vue";

export default {
  name: "dragWidget",
  components: {
    WAssetAccessory,
    WTable, WAssetChangeInfo, WAssetLog, DyFlowModel, DyFlow, DyTable, DyTabs, DySteps, DyCard},
  props: {
    model: {type: Object, default: {}},
    widgets: {type: Array, default: []},
    widget: {type: Object, default: null},
    drag: {type: Boolean, default: false},
  },
  data() {
    return {
      isAlready: false,
    }
  },
  created() {
    this.isAlready = true;
  },
  methods: {}
}
</script>
<style>
.cardwidgetheaderclass{
  float: left;width: 80px;text-align: center;background-color: #427CFF;font-size: 14px;
  height: 36px;
  line-height: 36px;

}
.cardwidgetheaderclass .widgetheaderclass{
  color:#ffffff;
  font-weight: 400;

}
</style>
